<template>
    <div class="styleCard">
        <div class="styleHeader">
            <div class="h">
                <h3>空间装扮</h3>
                <div class="isok">
                    <el-button type="warning" size="mini" @click="sumbitStyle()" v-if="showStyle">保存方案</el-button>
                    <el-button size="mini" @click="edit()" v-if="showStyle">退出</el-button>
                    <el-button type="warning" icon="el-icon-edit" size="mini" v-if="!showStyle" @click="showStyle=true">设置</el-button>
                </div>
                
            </div>
        </div>
        <div class="cardStyle" v-if="showStyle">
            <el-tabs type="border-card">
                <el-tab-pane label="换背景">
                    <el-tabs tab-position="left">
                        <el-tab-pane label="背景图">
                            <label class="hotTitle"><i class="el-icon-collection-tag" style="color:red"></i>推荐</label>
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="" @click="saveStyle(0)" >
                                </el-col>
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="" @click="saveStyle(1)">
                                </el-col>
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="" @click="saveStyle(2)">
                                </el-col>
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="" @click="saveStyle(3)">
                                </el-col>
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="">
                                </el-col>
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="">
                                </el-col>
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="">
                                </el-col>
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="">
                                </el-col>
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="">
                                </el-col>
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="">
                                </el-col>
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="">
                                </el-col>
                                <el-col :span="4">
                                    <img src="../../assets/img/test.jpg" alt="">
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="封面图">封面图</el-tab-pane>
                        <el-tab-pane label="自定义">自定义</el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="换配色">换配色</el-tab-pane>
                <el-tab-pane label="换版式">换版式</el-tab-pane>
            </el-tabs>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return {
            showStyle:false,
            styles: ["pink","red","green","blue"]
        }
    },
    methods:{
        edit(){
            this.showStyle = false;
        },
        sumbitStyle(){
            this.showStyle = false;
        },
        //选择样式
        saveStyle(id){
            this.$emit('styleids', this.styles[id])
        }
    }
}
</script>

<style lang="scss" scoped>
.styleCard{
    overflow:hidden;
    width:100%;
    margin:auto;
    .cardStyle{
        width: 81%;
        margin:auto;
        .hotTitle{
            text-align: left;
            color:red;
            display: block;
            margin:10px auto;
        }
        img{
            width:120px;
            height:120px;
            margin-bottom:20px;
        }
    }
    .styleHeader{
        width:100%;
        overflow: hidden;
        background:#409EFF;
        .h{
            width:81%;
            overflow: hidden;
            margin:auto;
            position: relative;
            h3{
                text-align: left;
                color:#fff;
            }
            .isok{
                position: absolute;
                top:20px;
                right:20px;
            }
        }
    }
    
}
</style>